<template>
    <div class="updateForm">
        <el-dialog
            title="增加新用户"
            :visible="dialogFormVisible"
            @close="$emit('closeDialog')"
            width="50%"
        >
            <el-form :label-position="labelPosition" label-width="150px" :model="addForm">
                <el-form-item label="手机号码(账号)" :required="true">
                    <el-input v-model="addForm.phone"></el-input>
                </el-form-item>
                <el-form-item label="密码" :required="true">
                    <el-input v-model="addForm.password"></el-input>
                </el-form-item>
                <el-form-item label="昵称" :required="true">
                    <el-input v-model="addForm.nickname"></el-input>
                </el-form-item>
                <el-form-item label="积分" :required="true">
                    <el-input v-model="addForm.points"></el-input>
                </el-form-item>
                <imgUpload
                    @uploaded="uploaded"
                    @uploadFail="uploadFail"
                    :size="500"
                    :urlTemp="addForm.avatar_url"
                ></imgUpload>
                <el-form-item label="状态(1:正常, 2:停用)" :required="true">
                    <el-input v-model="addForm.status"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="$emit('closeDialog')">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import imgUpload from "../imgUpload";
export default {
    name: "UserAdd",
    props: ["dialogFormVisible", "addTemp", "urlTemp"],
    data() {
        return {
            labelPosition: "right",
            addForm: {
                phone: "",
                password: "",
                nickname: "",
                points: "",
                status: "",
                avatar_url: ""
            },
            imageUrl: ""
        };
    },
    watch: {
        addTemp: function(obj) {
            // console.log(obj);

            this.addForm = { ...obj };
        },
        defaultSubmit:function(val){
            this.isSubmitted=val;
        }
    },
    methods: {
        submit: async function() {
            let data = await this._axios
                .post("/api/user/add", this.addForm)
                .then(data => data.data);
            console.log(data);

            if (data) {
                this.isSubmitted=true;
                this.$alert(`${data.msg}`, {
                    confirmButtonText: "确定",
                    callback: () => {
                        this.$message({
                            type: "warning",
                            message: `${data.msg}`
                        });
                        this.$emit("refresh");
                    }
                });
                this.addForm = {
                    phone: "",
                    password: "",
                    nickname: "",
                    points: "",
                    status: "",
                    avatar_url: ""
                };
                this.$emit('closeDialog');
            }
        },
        uploaded: function(res) {

            this.addForm.avatar_url = res.path;
        },
        uploadFail: function(res) {
            console.log(res);
            //上传错误处理
        },
        
    },
    components: {
        imgUpload
    }
};
</script>

<style lang="scss">
.updateForm {
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409eff;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
}
</style>